<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="./css/public.css"/>
		<link rel="stylesheet" type="text/css" href="./css/test_list.css"/>
	</head>
	<body>
		<!--顶部导航 logo-->
		<div class="center-top">
			<div class="center-top-main">
				<div class="logo">
					<img src="img/logo.png" alt=""/>
				</div>
				<div class="center-name">学习中心</div>
				<ul>
					<li>
						<a href="#">首页</a>
					</li>
					<li>
						<a href="#">课程中心</a>
					</li>
					<li>
						<a href="#">模拟题库</a>
					</li>
					<li>
						<img src="./img/thumb.png"/>
						<a href="#" class="my-class">我的网课</a>
					</li>
					<li>
						<img src="./img/shopcar.png"/>
						<a href="#">购课车</a>
					</li>
					<li>
						<img src="./img/tips.png"/>
						<a href="#">消息</a>
					</li>
					<li class="download-box">
						<a href="#" class="download">APP下载</a>
						<img src="./img/up.png" class="download-up"/>
						<img src="./img/downh.png" class="download-down"/>
						<div class="er-box">
							<img src="img/er.png"/>
							<span>雨露众德APP</span>
						</div>
					</li>
				</ul>
			</div>
		</div>
		<!--顶部个人基本信息-->
		<div class="person-info">
			<div class="person-info-main">
				<div class="person-thumb">
					<img src="./img/er.png"/>
				</div>
				<div class="person-name-rank">
					<div class="person-name">Z夯实</div>
					<div class="person-rank">
						<img src="img/king.png"/>
						<span>注册会员</span>
					</div>
				</div>
				<div class="person-info-right">
					<div class="person-cards">
						<div class="person-cards-num">1张</div>
						<div class="person-cards-name">优惠券</div>
					</div>
					<div class="person-cards">
						<div class="person-cards-num">123</div>
						<div class="person-cards-name">积分</div>
					</div>
					<div class="signin">
						<div class="signin-btn">签到领积分</div>
						<div class="signin-tip">您今天还没有签到</div>
					</div>
				</div>
				<div class="center-ad">
					<img src="img/center-ad.jpg" alt=""/>
				</div>
				<div class="my-message">
					您有<em>1</em>条未读信息
					<span class="close-message"> X </span>
				</div>
			</div>
		</div>
		<!--主要内容-->
		<div class="center-main">
			<!--左侧导航-->
			<div class="center-slider">
				<dl>
					<dd>
						<a href="" class="active">
							<img src="img/s1.png"/>
							<span>首页</span>
						</a>
					</dd>
				</dl>
				<div class="my-line"></div>
				<dl>
					<dt>我的课程</td>
					<dd>
						<a href="">
							<img src="img/s2.png"/>
							<span>开始听课</span>
						</a>
					</dd>
					<dd>
						<a href="">
							<img src="img/s3.png"/>
							<span>听课记录</span>
						</a>
					</dd>
					<dd>
						<a href="">
							<img src="img/s4.png"/>
							<span>我的直播</span>
						</a>
					</dd>
					<dd>
						<a href="">
							<img src="img/s5.png"/>
							<span>问答中心</span>
						</a>
					</dd>
				</dl>
				<div class="my-line"></div>
				<dl>
					<dt>我的题库</td>
					<dd>
						<a href="">
							<img src="img/s6.png"/>
							<span>开始做题</span>
						</a>
					</dd>
					<dd>
						<a href="">
							<img src="img/s7.png"/>
							<span>做题数据</span>
						</a>
					</dd>
				</dl>
				<div class="my-line"></div>
				<dl>
					<dt>个人管理</td>
					<dd>
						<a href="">
							<img src="img/s8.png"/>
							<span>我的订单</span>
						</a>
					</dd>
					<dd>
						<a href="">
							<img src="img/s9.png"/>
							<span>地址管理</span>
						</a>
					</dd>
					<dd>
						<a href="">
							<img src="img/s10.png"/>
							<span>个人资料</span>
						</a>
					</dd>
					<dd>
						<a href="">
							<img src="img/s11.png"/>
							<span>优惠券</span>
						</a>
					</dd>
					<dd>
						<a href="">
							<img src="img/s12.png"/>
							<span>我的积分</span>
						</a>
					</dd>
					<dd>
						<a href="">
							<img src="img/s13.png"/>
							<span>账户安全</span>
						</a>
					</dd>
				</dl>
				<div class="my-line"></div>
				<dl>
					<dt>其它</td>
					<dd>
						<a href="">
							<img src="img/s14.png"/>
							<span>学习资料</span>
						</a>
					</dd>
					<dd>
						<a href="">
							<img src="img/s15.png"/>
							<span>消息中心</span>
						</a>
					</dd>
					<dd>
						<a href="">
							<img src="img/s16.png"/>
							<span>APP下载</span>
						</a>
					</dd>
					<dd>
						<a href="">
							<img src="img/s17.png"/>
							<span>帮助中心</span>
						</a>
					</dd>
				</dl>
			</div>
			<!--右侧主题内容-->
			<div class="center-main-content">
				<div class="my-list">
					<div class="top">
						<span>二级建造师 - 设备设施管理操作（一）</span>
						<select>
							<option>切换科目</option>
							<option>科目一</option>
							<option>科目二</option>
							<option>科目三</option>
						</select>
					</div>
					<div class="test-tab">
						<ul>
							<li>
								<img src="img/t1.png"/>
								<span>章节练习</span>
							</li>
							<li class="cur">
								<img src="img/t2.png"/>
								<span>每日一练</span>
							</li>
							<li>
								<img src="img/t3.png"/>
								<span>历年真题</span>
							</li>
							<li>
								<img src="img/t1.png"/>
								<span>模拟试题</span>
							</li>
						</ul>
					</div>
					<span id="prev" style="cursor: pointer;">上周</span>
					<span id="next" style="cursor: pointer;">下周</span>
					<div class="test-list-box">
						<table>
							<tr>
								<th>星期一</th>
								<th>星期二</th>
								<th>星期三</th>
								<th>星期四</th>
								<th>星期五</th>
								<th>星期六</th>
								<th>星期日</th>
							</tr>
							<tr id="theday">
								<td>
									<span>2</span>
								</td>
								<td>
									<span>3</span>
								</td>
								<td>
									<span>4</span>
								</td>
								<td>
									<span>5</span>
								</td>
								<td>
									<span class="cur">6</span>
								</td>
								<td>
									<span>7</span>
								</td>
								<td>
									<span>28</span>
								</td>
							</tr>
						</table>
						<ul>
							<li>
								<div class="test-desc" style="margin-left: 0px;">
									<p class="test-title">二级建造师报班费用一般是多少大洋？</p>
									<p class="test-num-write">
										<span>共计23人参与学习</span>
									</p>
								</div>
								<div class="btn-group">
									<a class="download" href="#">开始练习</a>
								</div>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
		<!--底部-->
		<footer>
			<div class="footer-box">
				<div class="footer-top">
					<div class="footer-logo">
						<img src="img/flogo.png"/>
					</div>
					<div class="footer-nav">
						<ul>
							<li>
								<a href="#">了解雨露</a>
							</li>
							<li>
								<a href="#">帮助与支持</a>
							</li>
						</ul>
						<ul>
							<li>
								<a href="#">关于我们</a>
							</li>
							<li>
								<a href="#">联系我们</a>
							</li>
						</ul>
						<ul>
							<li>
								<a href="#">网站声明</a>
							</li>
							<li>
								<a href="#">反馈建议</a>
							</li>
						</ul>
						<ul>
							<li>
								<a href="#">售后中心</a>
							</li>
							<li>
								<a href="#">侵权举报</a>
							</li>
						</ul>
					</div>
					<div class="app-wechat">
						<div class="app">
							<div class="app-img">
								<img src="img/er1.png" />
							</div>
							<p>下载雨露众德app</p>
						</div>
						<div class="app">
							<div class="app-img">
								<img src="img/er2.png" />
							</div>
							<p>关注微信公众号</p>
						</div>
					</div>
				</div>
				<div class="footer-bottom">
					<p>全国客服热线：400-1767-214 京ICP备17069128号-1 京公网安备17069128</p>
					<p>Copyright 2017-2020 雨露众德教育集团</p>
				</div>
			</div>
		</footer>
		<script src="./js/public.js"></script>
		<script>
			var now = new Date();
			var date = now.getDate();
			var nowTime = now.getTime(); 
			var day = now.getDay();
			var oneDayTime = 24*60*60*1000;
			 
			var lastDayYear = ''; 
			var lastDayMonth = '';  
			var lastDay =  '';
			function weekDate(){
				var array = [];
				for(var i = 1;i<=7;i++){
					var dates = new Date(nowTime - (day-i)*oneDayTime).getDate();
					if(i == 7){
						lastDayYear = new Date(nowTime - (day-7)*oneDayTime).getFullYear();
						lastDayMonth = new Date(nowTime - (day-7)*oneDayTime).getMonth();
						lastDay = new Date(nowTime - (day-7)*oneDayTime).getDate();
					}
					array.push(dates);
				}
				var str = '';
				for(var i = 0;i<array.length;i++){
					if(array[i] === date){
						str += `<td><span class="cur" onclick="theDay(this,${array[i]})">${array[i]}</span></td>`;
					}
					else{
						str += `<td><span onclick="theDay(this,${array[i]})">${array[i]}</span></td>`;
					}
				}
				document.getElementById('theday').innerHTML = str;
			}
			weekDate();
			//下一周
			document.getElementById('next').onclick = function(){
				//本周最后一天年月日
				console.log(lastDayYear,lastDayMonth,lastDay);
				//本周最后一天日期对象
				var theLastDayObj = new Date(lastDayYear,lastDayMonth,lastDay);
				//本周最后一天毫秒数
				var lastSecond = theLastDayObj.getTime();
				
				
				//下周第一天毫秒数
				var nextFirstSecond = lastSecond+oneDayTime;
				nowTime = nextFirstSecond;
				//下周第一天日期对象
				var nextFirstObj = new Date(nextFirstSecond);
				now = nextFirstObj;
				//下周第一天星期几
				var nextFirstDay = 1;
				day = nextFirstDay;
				//下周第一天日期
				var nextFirstDate = nextFirstObj.getDate();
				date = nextFirstDate;
				weekDate();
				console.log('下周第一天',nextFirstObj.getFullYear(),nextFirstObj.getMonth()+1,nextFirstObj.getDate());
			}
			//上一周
			document.getElementById('prev').onclick = function(){
				//本周最后一天年月日
				console.log(lastDayYear,lastDayMonth,lastDay);
				//本周最后一天日期对象
				var theLastDayObj = new Date(lastDayYear,lastDayMonth,lastDay);
				//本周最后一天毫秒数
				var lastSecond = theLastDayObj.getTime();
				
				
				//上周第一天毫秒数
				var nextFirstSecond = lastSecond - 13*oneDayTime;
				nowTime = nextFirstSecond;
				//上周第一天日期对象
				var nextFirstObj = new Date(nextFirstSecond);
				now = nextFirstObj;
				//上周第一天星期几
				var nextFirstDay = 1;
				day = nextFirstDay;
				//上周第一天日期
				var nextFirstDate = nextFirstObj.getDate();
				date = nextFirstDate;
				weekDate();
				console.log('上周第一天',nextFirstObj.getFullYear(),nextFirstObj.getMonth()+1,nextFirstObj.getDate());
			}
			
			//切换日期
			function theDay(obj,date){
				var spans = document.getElementById('theday').getElementsByTagName('span');
				for(var i = 0;i<spans.length; i++){
					spans[i].className = '';
				}
				obj.className = 'cur';
				console.log(now.getFullYear(),now.getMonth()+1,date);
			}
		</script>
	</body>
</html>
